<!doctype html>
<html>
<head>
<template source='TPL:common.head' suffix='htm' />
<link href="{@theme:css}/register.css?v={@NEXT_RELEASE}" rel="stylesheet" />
</head>
<body>
<div class="wrap">
<template source='TPL:common.header' suffix='htm'/>
	<div class="main_wrap">
		<div class="box_wrap register cc">
			<h2 class="reg_head">欢迎注册成为 {@Wekit::C('site','info.name')} 会员</h2>
			<div class="reg_cont_wrap">
				<div class="reg_cont">
					<form id="J_register_form" action="{@url:u/Login/doThirdRegist}" method="POST">
					<div class="reg_form">
						<dl>
							<dt><label for="J_reg_username">用户名：</label></dt>
							<dd><span class="must_red">*</span><input aria-required="true" id="J_reg_username" data-id="username" name="username" type="text" class="input length_4 J_reg_input" value="{$userdata['username']}"></dd>
							<dd class="dd_r" id="J_reg_tip_username" role="tooltip" aria-hidden="true"></dd>
                                                        <input type="hidden" name="gender" value="{$userdata['gender']}"/>
                                                        <input type="hidden" name="uid" value="{$userdata['uid']}"/>
                                                        <input type="hidden" name="type" value="{$userdata['type']}"/>
                                                        <input type="hidden" name="avatar" value="{$userdata['avatar']}"/>
						</dl>
						<dl>
							<dt><label for="J_reg_password">密码：</label></dt>
							<dd><span class="must_red">*</span><input aria-required="true" id="J_reg_password" data-id="password" name="password" type="password" class="input length_4" value=""></dd>
							<dd class="dd_r" id="J_reg_tip_password" role="tooltip" aria-hidden="true"></dd>
						</dl>
						<dl>
							<dt><label for="J_reg_repassword">确认密码：</label></dt>
							<dd><span class="must_red">*</span><input aria-required="true" id="J_reg_repassword" data-id="repassword" name="repassword" type="password" class="input length_4" value=""></dd>
							<dd class="dd_r" id="J_reg_tip_repassword" role="tooltip" aria-hidden="true"></dd>
						</dl>
						<dl>
							<dt><label for="J_reg_email">电子邮箱：</label></dt>
							<dd>
								<div id="J_email_list" class="fl mail_down" style="display:;margin-top:27px;"></div>
								<span class="must_red">*</span><input aria-required="true" autocomplete="off" id="J_reg_email" data-id="email" name="email" type="text" class="input length_4" value="">
							</dd>
							<dd class="dd_r" id="J_reg_tip_email" role="tooltip" aria-hidden="true"></dd>
						</dl>
						
						<!--
						<dl class="cc dl_cd">
							<dt><label for="J_reg_code">验证码：</label></dt>
							<dd>
								<span class="must_red">*</span>
								<div class="cc mb5" style="height:30px;"><input id="J_reg_code" data-id="code" name="code" type="text" class="input length_4 fl"></div>
								<div id="J_register_verify"></div>
							</dd>
							<dd class="dd_r"><div id="J_reg_tip_code"></div></dd>
						</dl>
                                                -->
						
						<dl>
							<dt>&nbsp;</dt>
							<dd><button class="btn btn_big btn_submit mr20" type="submit">同意以下协议并注册</button></dd>
						</dl>
						<div class="agreements">
						<div><a id="J_agreements_btn" href="" class="s4" title="点击显示本协议">《本站协议规章内容》</a></div>
						<pre id="J_agreements_content" style="display:none;">{$config['protocol']|html}</pre></div>
					</div>
					</form>
				</div>
			</div>
			
		</div>
	</div>
<template source='TPL:common.footer' suffix='htm'/>
</div>
<script>
Wind.use('jquery', 'global', 'validate', 'emailAutoMatch', function(){

	/*暂时去掉验证码
		var reg_code = $('#J_reg_code');
		Wind.Util.getVerifyTemp({
			wrap : $('#J_register_verify'),
			afterClick : function(){
				$('#J_reg_tip_code').html('');
				reg_code.val('');
			}
		});
	*/
	
	//聚焦时默认提示
	var focus_tips = {
		invitecode : '本站开启邀请注册，请填写邀请码',
		username : '{$nameReg}',
		password : '{$pwdReg}',
		repassword : '请再输入一遍您上面填写的密码',
		email : '请填写真实的电子邮箱',
		regreason : '注册原因是管理员判断是否审核通过的主要参考依据',
		mobileCode : '请填写收到的手机验证码',
		qq : '',
		msn : '',
		aliww : '',
		code : ''
	};
	
	//密码强度
	var passwordRank = {
		1 : '<span class="pwd_strength_1"></span>弱',
		2 : '<span class="pwd_strength_2"></span>弱',
		3 : '<span class="pwd_strength_3"></span>中',
		4 : '<span class="pwd_strength_4"></span>强'
	};
	
	var register_form = $("#J_register_form"),
			reg_username = $('#J_reg_username'),						//用户名表单
			reg_password = $('#J_reg_password'),						//密码表单
			reg_tip_password = $('#J_reg_tip_password');		//密码提示区

	//validate插件修改了remote ajax验证返回的response处理方式；增加密码强度提示 passwordRank
	register_form.validate({
		//debug : true,
		errorPlacement: function(error, element) {
			//错误提示容器
			$('#J_reg_tip_'+ element[0].name).html(error);
		},
		errorElement: 'span',
		errorClass : 'tips_icon_error',
		validClass		: 'tips_icon_success',
		onkeyup : false,
		focusInvalid : false,
		rules: {
			invitecode : {
				required	: true,
				remote		: {
					url : "{@url:u/register/checkInvitecode}",
					type : 'post',
					dataType: "json",
					data : {
						invitecode : function(){
							return $("#J_reg_invitecode").val();
						}
					}
				}
			},
			username: {
				required	: true,
				remote		: {
					url : "{@url:u/register/checkusername}",
					type : 'post',
					dataType: "json",
					data : {username : function(){
							return $("#J_reg_username").val();
						}
					}
						   //返回的信息就是messagesss
				}
			},
			password : {
				required: true,
				remote : {
					url : '{@url:u/register/checkpwd}',		//验证密码
					dataType: "json",
					type : 'post',
					data : {
						username : function(){
							return reg_username.val();
						},
						pwd : function(){
							return reg_password.val();
						}
					}
				}
			},
			repassword : {
				required : true,
				equalTo : '#J_reg_password'
			},
			email : {
				required : true,
				email : true,
				remote : {
					url : "{@url:u/register/checkemail}",
					dataType: "json",
					type : 'post',
					data : {
						email :  function(){
							return $("#J_reg_email").val();
						}
					}
				}
			},
			regreason : {
				required : true,
				maxlength : 500
			},
			mobileCode : {
				required : true,
				remote : {
					url : '{@url:u/mobile/checkmobilecode}',		//验证手机验证码
					dataType: "json",
					type : 'post',
					data : {
						mobileCode : function(){
							return $('#J_reg_mobileCode').val();
						},
						mobile : function(){
							return $('#J_reg_mobile').val();
						}
					}
				}
			},
			qq : {
				required : true
			},
			msn : {
				required : true
			},
			aliww : {
				required : true
            }/*,
			code : {
				required : true,
				remote : {
					url : "{@url:verify/index/check}",
					dataType: "json",
					type : 'post',
					data : {
						code :  function(){
							return reg_code.val();
						}
					}
				}
            }
            */
		},
		highlight	: false,
		unhighlight	: function(element, errorClass, validClass) {
			var tip_elem = $('#J_reg_tip_'+ element.name);
			if(element.value){
				tip_elem.html('<span class="'+ validClass +'" data-text="text"><span>');
			}
		},
		onfocusin	: function(element){
			var id = element.name;
			$('#J_reg_tip_'+ id).html('<span class="reg_tips" data-text="text">'+ focus_tips[id] +'</span>');
			$(element).parents('dl').addClass('current');
			
			if(id == 'password') {
				//密码则添加强度验证
				
				$(element).on('keyup', function(e){
					
					//过滤tab键
					if(e.keyCode !== 9) {

						$.post('{@url:u/register/checkpwdStrong}', {
							pwd : reg_password.val()
						}, function(data){
							//已失焦，则显示强度
							if(reg_tip_password.data('blur')) {
								return false;
							}
							if(data.state === 'success') {
								reg_tip_password.html(passwordRank[data.message['rank']]);
							}else if(data.state === 'fail'){
								reg_tip_password.html('');
							}
						}, 'json');

						//移除失焦标识
						reg_tip_password.removeData('blur');
					}
					
				});
			}
		},
		onfocusout	:  function(element){
			var _this = this;
			$(element).parents('dl').removeClass('current');
			
			if(element.name === 'email') {
				//邮箱匹配点击后，延时处理
				setTimeout(function(){
					element.value = $.trim(element.value);
					_this.element(element);
				}, 150);
			}else{
			
				if(element.name === 'password'){
					//防止重复绑定
					$(element).off('keyup');
					
					//失焦标识
					reg_tip_password.data('blur', 'blur');
				}
				_this.element(element);
				
			}
			
		},
		messages: {
			invitecode : {
				required : '邀请码不能为空'
			},
			username : {
				required	: '用户名不能为空',
				remote : '用户名已存在' //ajax验证默认提示
			},
			password : {
				required : '密码不能为空',
				remote : '密码不合要求' //ajax验证默认提示
			},
			repassword : {
				required : '确认密码不能为空',
				equalTo : '两次输入的密码不一致。请重新输入'
			},
			email : {
				required : '邮箱不能为空',
				email : '请输入正确的电子邮箱地址',
				remote : '该电子邮箱已被注册，请更换别邮箱' //ajax验证默认提示
			},
			regreason : {
				required	: '注册原因不能为空',
				maxlength	: '注册原因描述内容过长，不能超过500字'
			},
			mobileCode : {
				required	: '手机验证码不能为空'
			},
			qq : {
				required	: 'QQ不能为空'
			},
			msn : {
				required	: 'MSN不能为空'
			},
			aliww : {
				required	: '阿里旺旺不能为空'
			},
			code : {
				required	: '验证码不能为空',
				remote : '验证码不正确或已过期' //ajax验证默认提示
			}
		}
	});
	
	
	//邮箱后缀匹配
	$('#J_reg_email').emailAutoMatch();
	
	//注册协议
	$('#J_agreements_btn').on('click', function(e){
		e.preventDefault();
		$('#J_agreements_content').toggle();
	});

	register_form.find('dl:first input:text:visible').focus().parents('dl').addClass('current');


<!--#if ($config['active.phone']) {#-->
	//手机验证
	window.M_CHECK = '{@url:u/register/sendmobile}';
	window.M_CHECK_MOBILE = '{@url:u/register/checkmobile}';
	Wind.js(GV.JS_ROOT +'pages/u/regMobileCheck.js?v='+ GV.JS_VERSION);

<!--#}#-->

});
</script>
</body>
</html>
